<template>
  <div class="user-card" v-if="!isNull(userInfo)">
    <div>
      <img v-if="isNull(userInfo.avatar)" src="../../assets/imgs/nouser.png" />
      <img v-else :src="userInfo.avatar">
      <b>{{ userInfo.name }}</b>
    </div>
    <div v-if="editAbleUser">
      <i>{{ userInfo.openId }}</i>
    </div>
    <div style="margin-top: 5px;">
      <i>注册日期：</i>
      <i>{{ userInfo.createTime }}</i>
    </div>
    <div class="mark-date-btn">
      <b @click="getMarksDate($event, true)">{{ getMarkText }}</b>
      <i class="iconfont icon-jiantou_yemian_xiangyou_o" @click="getMarksDate($event, true)"></i>
      <u v-if="editAbleUser" @click="showUserEdit">编辑用户</u>
    </div>
    <div class="date-list" @click="getMarksDate(false)" v-if="!isNull(markDateList)">
      <div class="inner scroll-base" :style="dateListStyle">
        <div class="item" v-for="item in markDateList" :key="item.markDate">
          <b @click.stop="getMarks(item.markDate,item.dateStr)">{{ item.dateStr }}</b>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from '@vue/runtime-core'
import util from '@/assets/js/util'
import http from '@/axios/http'
import $tip from '../able_mod/AbToolTip'
export default {
  props: ['data'],
  setup(props, ctx) {
    onMounted(() => {
      userInfo.value = props.data
    })
    let userInfo = ref()
    let pk = sessionStorage.getItem('power_key')
    let editAbleUser = ref(pk==util.MASTER_KEY)

    // 查询当前用户打卡日期列表
    let markDateList = ref([])
    let getMarkText = ref('选择足迹查询日期')
    let dateListStyle = ref('')
    async function getMarksDate(e, f) {
      // console.log(e)
      if (!f) {
        markDateList.value = []
        return
      }
      let g = {}
      g.openId = userInfo.value.openId
      let r = await http.getMarksDate(g)
      if (r.code == 10000) {
        markDateList.value = []
        let _data = r.data
        if (util.isNull(_data)) {
          $tip.message.open('这个人还没有足迹', 2500, 'primary')
        } else {
          for(let i in _data) {
            _data[i].dateStr = util.dateFormatStr(_data[i].markDate)
          }
          let _top =  e.pageY * 1 - 15 * 1 
          let _bottom = document.getElementById('footmarkMap').clientHeight - e.pageY 
          dateListStyle.value = _bottom > 320 ? `top: ${_top}px;` : `bottom: ${_bottom - 10}px;`
          markDateList.value = _data
        }
      }
    }

    // 按日期获取mark记录
    async function getMarks(date,dateStr) {
      let g = {}
				g.openId = userInfo.value.openId
				g.sTime = date+' 00:00:00'
				g.eTime = date+' 23:59:59'
				let r = await http.getMarks(g)
				if (r.code == 10000) {
          markDateList.value = []
          getMarkText.value = `查询${dateStr}的足迹`
          ctx.emit('getmarks', r.data)
        }
    }

    // 显示用户编辑框
    function showUserEdit() {
      ctx.emit('userEdit', userInfo.value)
    }

    function isNull(v) {
      return util.isNull(v)
    }

    return {
      userInfo, editAbleUser, getMarksDate, markDateList, getMarkText, dateListStyle, getMarks, showUserEdit, isNull
    }
  }
}
</script>

<style lang="scss" scoped>
.user-card {
  display: block;

  div {
    @extend %view-flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;

    img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
    }

    b {
      color: #666;
      font-size: 14px;
      font-weight: 300;
    }

    i {
      font-style: normal;
      font-size: 12px;
      color: #999;
    }
  }

  .mark-date-btn {
    position: relative;
    padding-top: 5px;
    justify-content: flex-end;

    b,
    .iconfont {
      cursor: pointer;
      color: $color-blue;
    }

    b {
      font-weight: 900;
    }

    .iconfont {
      font-size: 28px;
    }

    u{
      position: absolute;left: -10px;
      cursor: pointer;
      font-size: 14px;
      color: #eee;
      background-color: $color-blue;
      padding: 5px 10px;
      border-radius: 3px;
      box-shadow: 1px 1px 5px #333;
    }
  }

  .date-list {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1001;

    .inner {
      position: absolute;
      left: 280px;
      display: block;
      width: auto;max-height: 360px;
      overflow-y: auto;
      overflow-x: hidden;
      background-color: #fff;
      box-shadow: 1px 1px 10px #aaa;
      border-radius: 5px;
      padding: 10px;
      .item {
        padding: 10px;
        b{
          cursor: pointer;
        }
        b:hover{
          color: $color-primary;
        }
      }
    }
  }

  .user-edit{
    @extend %view-flex;
    flex-direction: row;
    align-items: flex-start;
    position: fixed;
    top: 25px;left: calc(50% - 180px);
    width: 360px;
    padding: 10px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 1px 1px 5px #ccc;
    .avatar{
      cursor: pointer;
      width: auto;height: auto;
      background-color: rgba(0,0,0,0);
      margin: 10px 5px;
    }
    .info{
      @extend %view-flex;
      align-items: flex-start;
      padding: 10px;
      b{
        cursor: pointer;
        font-size: 16px;
        color: #333;
      }
      i{
        margin-top: 3px;
        font-size: 14px;
      }
    }
    .btn{
      position: absolute;
      top: 15px;right: 10px;
      cursor: pointer;
    }
  }

  .user-edit-name{
    @extend %view-flex;
    background-color:#fff;
    padding: 10px 25px;
    padding-top: 25px;
    margin-top: -260px;
  }
}
</style>